<template>
  <div class="address">
    <x-header :left-options="{showBack: true, backText:'我的收货地址'}"><a slot="right" @click="manger">{{rightText}}</a></x-header>
      <section class="add-man" v-for="item in items" v-show="item.id">
          <div class="add-list">
            <p>{{item.text}}</p>
            <p>{{item.recipient}} {{item.gender | sexTrue}}同学 {{item.phone}}</p>
            <div class="delete" @click="del(item)">
              <span class="iconfont icon-Ge_Dizhi_Shanchu"></span>
            </div>
          </div>
      </section>

      <div class="layer" v-show="layshow">{{laymsg}}</div>

  </div>
</template>

<script>
import { XHeader } from 'vux'

export default {
  components: {
    XHeader
  },
  data:function(){
    return {
      shan:true,
      rightText:'完成',
      items:[],
      layshow:false,
      laymsg:'',
    }
  },
  mounted() {
    this.$http.get('/api/delivery-addresses').then(function (res) {
      this.items = res.body.data;
    });
  },
  methods:{
    layer(bool,msg){
      var _this = this;
      this.layshow = bool;
      this.laymsg = msg;
      setTimeout(function(){
        _this.layshow = false;
      },1000)
    },
    del(item) {
        this.$http.delete('/api/delivery-addresses/'+item.id).then((res) =>{
          this.layer(true,'删除成功');
          item.id = 0;
        }).catch(function(){
          this.layer(true,'删除失败');
        });
    },
    manger() {
      this.$router.push({path:'/dist/Address'});
    }
  },
}
</script>

<style scoped lang="less">
@import '~vux/src/styles/1px.less';
.address{
  margin-top:46px;
  padding-bottom:60px;
}
.vux-header{
  background-color:#ff4d4d;
}
.add-man:nth-child(1){
  margin-top:0.3rem;
}
.add-man{
  overflow-x:scroll;

  width:100%;
  margin-bottom:0.3rem;
}
.add-list{
  height:5.3rem;
  width:120%;
  color:#3f3f3f;
  background-color:#fff;
  font-size:16px;
  position: relative;
}
.add-list:after{
  content:" ";
  position: absolute;
  right:15%;
  top:1.2rem;
  width:1px;
  height:5.3rem;
  background-color:#969696;
}
.add-list{
  padding:1.2rem 0;
}
.add-list p{
  margin:0 2rem;
  line-height:2.7rem;
}
.add-list p:nth-child(2){
  color:#969696;
}
.delete{
  padding:0 1rem;
  height:44px;
  position: absolute;
  right:0px;
  top:1rem;
}
.delete .iconfont{
  font-size:38px;
  color:#969696;
}
.add-address{
  width:100%;
  height:4.8rem;
  line-height:4.8rem;
  font-size:16px;
  color:#ff4d4d;
  text-align:center;
  position: fixed;
  bottom:0;
  z-index:1000;
  background-color:#fff;
}
.add-address .iconfont{
  margin-right:0.6rem;
}
</style>